{extend name="layout/plugin_layout" /}
﻿
{block name="title"}{$plugin.title} - {$app.title}{/block}
{block name="head"}
{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body overflow-auto">
            <div class="main">
                <div class="alert shadow-lg">
                    <div class="flex-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#2196f3"
                             class="w-6 h-6 mx-2">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <label>本地生成，由于浏览器的不同，音色会有不同</label>
                    </div>
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">字符串</span>
                    </label>
                    <textarea v-model="set.input" class="textarea textarea-bordered  h-64"></textarea>
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">音色</span>
                    </label>
                    <select class="select select-primary" v-model="set.voice">
                        <option v-for="item in set.voices">{{item.name}}</option>
                    </select>
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">语速</span>
                        <span class="label-text-alt">{{set.rate}}</span>
                    </label>
                    <input type="range" min="0" max="3" step="0.1" v-model="set.rate" class="range">
                </div>
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">音高</span>
                        <span class="label-text-alt">{{set.pitch}}</span>
                    </label>
                    <input type="range" min="0" max="3" step="0.1" v-model="set.pitch" class="range">
                </div>
                <div class="card-actions mt-4">
                    <button class="btn btn-primary flex-1" @click="play">
                        播放
                    </button>
                    <button class="btn btn-primary flex-1" @click="reset">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                  clip-rule="evenodd"/>
                        </svg>
                        清空
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    new Vue({
        el: '#app',
        data: {
            set: {
                input: '山有木兮木有枝，心悦君兮君不知。',
                rate: 1,
                pitch: 1,
                voice: 1,
                voices: [],
            },
            synth: null,
        },
        created() {
            if (window.speechSynthesis === undefined) {
                $message.error("该浏览器不支持语音生成，请更换Chrome浏览器后重试")
                return
            }
            this.synth = window.speechSynthesis
            window.speechSynthesis.onvoiceschanged = e => {
                this.set.voices = window.speechSynthesis.getVoices();
                this.set.voice = this.set.voices[0].name
            }
        },
        methods: {
            play() {
                try{
                    const utterThis = new SpeechSynthesisUtterance(this.set.input);
                    this.set.voices.forEach(value => {
                        if (this.set.voice === value.name) {
                            utterThis.voice = value;
                        }
                    })
                    utterThis.pitch = this.set.pitch;
                    utterThis.rate = this.set.rate;
                    this.synth.cancel()
                    this.synth.speak(utterThis);
                }catch (e) {
                    $message.error(e)
                }
            },
            reset() {
                this.set.input = ''
            },
        },
    })

</script>

{/block}